<template>
	<view class="box">
		<view class="page-section-spacing">
		    <swiper class="swiper1" indicator-active-color="#0096ff"
		        indicator-dots="true" 
		        autoplay="true" 
		        interval="5000" 
		        duration="1500" 
				   circular>
		        <swiper-item v-for="(item , index) in homeSlide" :key="index">
		            <image :src="item.url" mode="aspectFill" class="img_2"></image>
		        </swiper-item>
		    </swiper>
		</view>
		<view class="box_1">
			<view class="uni-margin-wrap">
						<swiper class="swiper2" indicator-active-color="#0096ff" :indicator-dots="true" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item>
								<view class="swiper-item uni-bg-red">
								<view class="box_2">
									<view class="box_4">
										<view class="">
											<image src="../../static/35.png" mode="" class="img_1"></image>
										</view>
										<view class="">
											疫情防控<br>服务
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/36.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											核算检测<br>一键通
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/37.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											郑好码
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/38.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											返郑返豫<br>人员登记
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/39.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											郑好融
										</view>
									</view>
								</view>
								<view class="box_3">
									<view class="box_4">
										<view class="">
											<image src="../../static/40.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											郑好拍
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/41.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											社保
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/42.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											郑惠企 .<br>亲情在线
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/43.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											公积金
										</view>
									</view>
									<view class="box_4">
										<view class="">
											<image src="../../static/44.png" mode=""  class="img_1"></image>
										</view>
										<view class="">
											契锐专区
										</view>
									</view>
								</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green">
									<view class="box_2">
										<view class="box_4">
											<view class="">
												<image src="../../static/45.png" mode="" class="img_1"></image>
											</view>
											<view class="">
												一件事专<br>区
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/46.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												智慧停车
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/47.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												居住证一<br>件事
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/48.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												企业服务<br>专区
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/49.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												入社
											</view>
										</view>
									</view>
									<view class="box_3">
										<view class="box_4">
											<view class="">
												<image src="../../static/50.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												燃气加装<br>安全装置
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/51.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												稳经济促<br>增长
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/53.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												基层服务<br>专区
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/54.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												医保
											</view>
										</view>
										<view class="box_4">
											<view class="">
												<image src="../../static/55.png" mode=""  class="img_1"></image>
											</view>
											<view class="">
												更多
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
		</view>
		
		<view class="">
			<view id="boxx_1" class="row-me row-center">
				<image src="../../static/56.png" mode="" style="width: 100rpx; margin-left: 30rpx;margin-right: 10rpx; height: 60rpx; float: left; margin-top: 20rpx;"></image>
					<swiper id="lbtu" circular="true" vertical="true" autoplay="true" interval="3000" duration="1000" class="margin-right30 swiperBox">
						<swiper-item v-for="(item,index) in noticeList" :key="index" class="row-me row-center swiperItem">
							{{item.contents}} <image src="../../static/69.png" mode="" style="float: right; width: 40rpx; height: 40rpx; margin-top: 33rpx;"></image>
						</swiper-item>
					</swiper>
				</view>
		</view>
		<view class="box_5">
			<view class="tab_nav">
			  <view class="navTitle" v-for="(item,index) in navList" :key="index">
			    <view :class="{'active':current === index}" @click="checked(index)">
			      {{item.title}}
			    </view>
			  </view>
			</view>
			<view class="nav_item" v-if="current==0">
			  <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			  					<view id="demo1" class="scroll-view-item_H uni-bg-red"><image src="../../static/67.png" mode="" class="img_10"></image> </view>
			  					<view id="demo2" class="scroll-view-item_H uni-bg-green"><image src="../../static/68.png" mode="" class="img_10"></image></view>
			  					<view id="demo2" class="scroll-view-item_H uni-bg-blue"><image src="../../static/65.png" mode="" class="img_10"></image></view>
								<view id="demo2" class="scroll-view-item_H uni-bg-blue1"><image src="../../static/66.png" mode="" class="img_10"></image></view>
								<view id="demo2" class="scroll-view-item_H uni-bg-blue2"><image src="../../static/64.png" mode="" class="img_10"></image></view>
			  				</scroll-view>
			</view>
			<view class="nav_item" v-if="current==1">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
								<view id="demo1" class="scroll-view-item_H uni-bg-red"><image src="../../static/61.png" mode="" class="img_10"></image> </view>
								<view id="demo2" class="scroll-view-item_H uni-bg-green"><image src="../../static/62.png" mode="" class="img_10"></image></view>
								<view id="demo2" class="scroll-view-item_H uni-bg-blue"><image src="../../static/59.png" mode="" class="img_10"></image></view>
								<view id="demo2" class="scroll-view-item_H uni-bg-blue1"><image src="../../static/60.png" mode="" class="img_10"></image></view>
								<view id="demo2" class="scroll-view-item_H uni-bg-blue2"><image src="../../static/58.png" mode="" class="img_10"></image></view>
							</scroll-view>
			</view>
		</view>
		<view class="box_6">
			<view class="box_7">
				<view class="box_9">
					政策.资讯
				</view>
				<view class="box_10">
					<view class="box_11">
						<view class="box_13">
							巾帼志愿者在行动
						</view>
						<view class="box_14">
							郑好办 2022-12-13
						</view>
					</view>
					<view class="box_12">
						<image src="../../static/70.png" mode="" class="img_11"></image>
					</view>
				</view>
			</view>
			<view class="box_8">
				<view class="box_11">
					<view class="box_13">
						郑州市主城区发热诊室名单及联系方式
					</view>
					<view class="box_14">
						郑好办 2022-12-13
					</view>
				</view>
				<view class="box_12">
					<image src="../../static/71.png" mode="" class="img_11"></image>
				</view>
			</view>
			<view class="box_8">
				<view class="box_11">
					<view class="box_13">
						【郑州新闻联播】市委理论学习中心组举行集体学习会
					</view>
					<view class="box_14">
						郑好办 2022-12-13
					</view>
				</view>
				<view class="box_12">
					<image src="../../static/72.png" mode="" class="img_11"></image>
				</view>
			</view>
			<view class="box_8">
				<view class="box_11">
					<view class="box_13">
						新冠疫苗第二剂次加强免疫接种实施方案
					</view>
					<view class="box_14">
						郑好办 2022-12-13
					</view>
				</view>
				<view class="box_12">
					<image src="../../static/73.png" mode="" class="img_11"></image>
				</view>
			</view>
			<view class="box_15">
				<view class="">
					郑州市人民政府主办<br>
				郑州市大数据管理局承办<br>
				郑州大数据发展有限公司运营<br>
				客服电话：0371-9618956
				</view>
				
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current: 0,
				navList: [{
				  index: 0,
				  title: '最新上线'
				}, {
				  index: 1,
				  title: "热门主题"
				}],
			homeSlide:[],
			noticeList:[],
			}
		},
		onLoad(){
			this.liebiao()
			this.gonggao()
		},
		methods: {
			scroll: function(e) {
							console.log(e)
							this.old.scrollTop = e.detail.scrollTop
						},
			checked(index) {
			  this.current = index
			},
			liebiao(){
				uni.request({
				    url:"https://goods.zzgoodqc.cn/index.php/index/hao/getImgList",
				    success: (res) => {
				        console.log(res.data.data.data)
						this.homeSlide=res.data.data.data
				    }
				})	
			},
			gonggao(){
				uni.request({
				    url:"https://goods.zzgoodqc.cn/index.php/index/hao/getTowersList",
				    success: (res) => {
				        console.log(res.data.data.data)
					this.noticeList=res.data.data.data
				    }
				})	
			}
		}
	}
</script>
 
<style scoped>
	.box_15{
		width: 100%;
		height: 200rpx;
		font-size: 26rpx;
		color: #888888;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-top: 30rpx;
	}
	.box_13{
		margin-bottom: 60rpx;
		letter-spacing: 5rpx;
	}
	.box_14{
		color: #888888;
	}
	.img_11{
		width: 100%;
		height: 100%;
	}
	.box_11{
		width: 63%;
		height: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.box_12{
		width: 34%;
	height: 170rpx;
	}
	.box_10{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.box_9{
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		font-weight: 600;
		font-size: 40rpx;
		
	}
	.box_8{
		width: 96%;
		height: 200rpx;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.box_7{
		width: 96%;
		height: 270rpx;
		border-bottom: 1px solid #ccc;
	}
	.box_6{
		width: 100%;
		background: #fff;
		
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#demo2{
		margin-left: 2%;
		height: 100rpx;
	}
	.nav_item{
		width: 94%;
		margin-left: 3%;
		
	}
	.img_10{
		width: 100%;
		height: 180rpx;
	}
	.uni-bg-red{
		
	}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 200rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 45%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
	.tab_nav {
	  display: flex;
	  justify-content: flex-start;
	  align-items: flex-start;
	}
	 
	.tab_nav .navTitle {
	  height: 90rpx;
	  line-height: 90rpx;
	  width: 25%;
	  text-align: center;
	  font-size: 32rpx;
	  font-family: Alibaba PuHuiTi;
	  color: #555555;
	  margin-left: 10rpx;
	}
	 
	.active {
	  position: relative;
	  color: #000;
	  font-weight: 600;
	  font-size: 40rpx;
	}
	 
	.active::after {
	  content: "";
	  position: absolute;
	  width: 100rpx;
	  height: 4rpx;
	  left: 0px;
	  right: 0px;
	  bottom: 0px;
	  margin: auto;
	}
	.box_5{
		width: 100%;
		height: 300rpx;
		background: #fff;
		margin-top: 20rpx;
	}
	.box_1{
		background: #fff;
	}
	.box{
		width: 100%;
		background: #f6f7f9;
		display: flex;
		flex-direction: column;
		
	}
	#lbtu{
		height: 100rpx;
		line-height: 100rpx;
		width: 75%;
		margin-left: 3%;
	}
	.row-me row-center swiperItem{
		display: flex;
		flex-direction: row;
	}
	#boxx_1{
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid #e7f0ff;
		display: flex;
		flex-direction: row;
		background: #fff;
	}
	#imgqw{
		width: 50rpx;
		height: 50rpx''
	}
	.broadcast{
			margin-top: -40rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.horn {
				width: 40rpx;
				height: 40rpx;
			}
			.swiperBox{
				width: 500rpx;
				// background: red;
				height: 80rpx;
				.horn {
					width: 40rpx;
					height: 40rpx;
				}
				.swiperItem{
					.txt1 {
						color: #4E9D77;
					}
					
					.txt2 {
						color: #F29A38;
					}
				}
				
			}
		}
	.box_4{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 18%;
	}
	.img_1{
		width: 50rpx;
		height: 50rpx;
	}
	.box_2{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		
	}
	.box_3{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	.swiper-item uni-bg-red{
		display: flex;
		flex-direction: column;
	}
 .swiper1{
     height: 450rpx;
 }
 .swiper2{
     height: 360rpx;
	 margin-top: 20rpx;
 }
 .img_2{
     width: 100%;
     height: 450rpx;
	 border-bottom-right-radius: 40%;
	 border-bottom-left-radius: 40%;
 }
</style>